import React, { useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import {RightOutline} from 'antd-mobile-icons'
import { NavBar, Card, Switch } from 'antd-mobile'
import './Account.css'
export default function Account() {
    const navigate = useNavigate()
    const back = () => {
        navigate(-1)
    }
    return (
        <div className='account'>
            <div className='account-top'>
                <NavBar
                    backIcon={null} back={<img src='https://img.axureshop.com/76/f2/4c/76f24c3cde0f4d4e89019bd9147be2a7/images/%E6%AF%8F%E6%97%A5%E6%8F%90%E9%86%92/u1273.png' />} onBack={back}>
                    <b className='shez-top-title' style={{ fontSize: '1rem' }}>账号与安全</b>
                </NavBar>
            </div>
            <div className='account-bottom'>
                <div className='account-bottom-item'>
                    <div>
                        <b className='account-bottom-item-title'>账号密码</b>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>手机</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <span>未绑定</span>
                            <RightOutline />
                        </div>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>邮箱</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <span>未绑定</span>
                            <RightOutline />
                        </div>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>更多</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <RightOutline />
                        </div>
                    </div>
                </div>
                <div className='account-bottom-item'>
                    <div>
                        <b className='account-bottom-item-title'>第三方账号</b>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>微信</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <span>未绑定</span>
                            <RightOutline />
                        </div>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>微博</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <span>未绑定</span>
                            <RightOutline />
                        </div>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>QQ</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <span>未绑定</span>
                            <RightOutline />
                        </div>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>Facebook</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <span>未绑定</span>
                            <RightOutline />
                        </div>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>Google</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <span>未绑定</span>
                            <RightOutline />
                        </div>
                    </div>
                    <div className='account-bottom-item-box' onClick={() => { }}>
                        <div className='account-bottom-item-box-left' >
                            <span>Apple</span>
                        </div>
                        <div className='account-bottom-item-box-right'>
                            <span>未绑定</span>
                            <RightOutline />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
